import React, { useState, useRef, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { Form, Input, Divider, message, Button, Modal, Row, Col, Popconfirm } from 'antd'
import { connect } from 'umi'
import { getMessageRolePageList, addMessageRoleInterface, deleteMsgRole } from './service'

const { TextArea } = Input;

const TableList = (props) => {
  const actionRef = useRef();
  const [visible, setVisible] = useState(null);
  const [title, setTitle] = useState('');
  const [form] = Form.useForm();
  const [msgRoleInfo, setMsgRoleInfo] = useState({});

  const addRole = () => {
    setTitle('添加消息角色');
    setVisible(true);
  };

  const showUpdateMsgRole = (values) => {
    setTitle('编辑消息角色');
    setVisible(true);
    setMsgRoleInfo(values);
    form.setFieldsValue(values);
  };

  const onFinish = values => {
    let saveData;
    setVisible(false);
    if (title === '添加消息角色'){
      saveData = values;
    }else if(title === '编辑消息角色'){
      let {noticeRoleName, remark, ...data} = msgRoleInfo;
      saveData = {...data, ...values};
    }
    addMessageRoleInterface(saveData).then(r =>{
      if (r.flag){
        message.success(`${title === '添加消息角色'? '添加':'编辑'}消息角色成功。`);
      }else {
        message.error(`${title === '添加消息角色'? '添加':'编辑'}消息角色失败。`);
      }
      actionRef.current.reload();
    });
    form.resetFields();
  };

  const addRoleCancel = e => {
    setVisible(false);
    form.resetFields();
  };

  const delRole = (value) => {
    deleteMsgRole(value.noticeRoleId).then(r => {
      if (r.flag){
        message.success(`删除消息角色成功。`);
      }else {
        message.error(`删除消息角色失败。`);
      }
      actionRef.current.reload();
    })
  };

  const columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
      dataIndex: 'roleId',
      align: 'center',
      width: '10%'
    },
    {
      title: '角色名称',
      dataIndex: 'noticeRoleName',
      align: 'center',
      width: '30%'
    },
    {
      title: '备注',
      hideInSearch: true,
      dataIndex: 'remark',
      align: 'center',
      width: '40%'
    },

    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      align: 'center',
      width: '20%',
      render: (item, record) => (
        <>
          {<a onClick={() => showUpdateMsgRole(record)}>编辑</a>}
          {<Divider type="vertical" />}
          {<Popconfirm title={`是否确认删除?`} onConfirm={() => delRole(record)} okText="是" cancelText="否">
            <a>删除</a>
          </Popconfirm>}
        </>
      ),
    },
  ];


  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        rowKey="roleId"
        request={(params) => getMessageRolePageList(params)}
        toolBarRender={(action, { selectedRows }) => [
          <Button type="primary" onClick={() => addRole()}>新建</Button>
        ]}
        columns={columns}
      />
      <Modal
        title={title}
        visible={visible}
        footer={null}
        closable={false}
      >
        <Form
          form={form}
          name="normal_login"
          className="login-form"
          onFinish={onFinish}
        >
          <Form.Item name="noticeRoleName">
            <Input placeholder="消息角色名"/>
          </Form.Item>
          <Form.Item name="remark">
            <TextArea rows={4} placeholder="备注"/>
          </Form.Item>
          <Row justify='end' gutter={16}>
            <Col className="gutter-row" style={{paddingBottom: '20px'}}>
              <Button style={{marginRight: '12px'}} onClick={addRoleCancel}>取消</Button>
              <Button type="primary" htmlType="submit">保存</Button>
            </Col>
          </Row>
        </Form>
      </Modal>
    </PageHeaderWrapper>
  )
};

export default connect(({  }) => ({
}))(TableList)
